<template>
  <div class="head-container">
    <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入关键词">
      <template #prefix>
        <Icon icon="ep:search" />
      </template>
    </el-input>
  </div>
  <div class="head-container">
    <el-tree
      ref="treeRef"
      :data="biaoqianList"
      :indent="10"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :props="defaultProps"
      default-expand-all
      highlight-current
      node-key="id"
      @node-click="handleNodeClick"
      :render-content="renderContent"
    />
  </div>
  <!-- 添加或修改标签 成功后刷新树形结构-->
  <LabelForm ref="formRef" @success="getLabelTree" />
</template>

<script lang="ts" setup>
import { ElTree } from 'element-plus'
// import * as DeptApi from '@/api/system/dept'
import * as BiaoqianApi from '@/api/system/biaoqian'
import { defaultProps, handleTree } from '@/utils/tree'
import type Node from 'element-plus/es/components/tree/src/model/node'
import LabelForm from './LabelForm.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const deptName = ref('')
const handleNodeClickData = ref('')
const biaoqianList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()
// 引入父组件index自定义事件 (需要时使用 emits触发)
const emits = defineEmits(['success', 'changeRuleQueryParam'])
/** 添加/修改操作 */
const formRef = ref()
// 当点击标签树形结构时需要使用的参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  ruleName: undefined,
  labelId: undefined
})
// 标签查询
const listBiaoqianApiParams = reactive({
  nameList: '',
  labelname: ''
})
/** 获得标签树型结构 */
const getLabelTree = async (data: BiaoqianApi.LabelTreeVo) => {
  listBiaoqianApiParams.nameList = data.nameList
  const res = await BiaoqianApi.BiaoQianTree(data)
  console.log('---------------左侧标签树方法被调用了---------------------')
  biaoqianList.value = []
  biaoqianList.value.push(...handleTree(res))
}
// 点击节点时触发树形结构(通过当前点击的 节点:标签id 去查询所属的规则列表)
const handleNodeClick = async (data: any) => {
  console.log(data['id'])
  queryParams.labelId = data['id']
  console.log('queryParams的值为:', queryParams)
  emits('changeRuleQueryParam', data['id'])
  emits('success')
  // 重新给当前节点赋值
  handleNodeClickData.value = data
}

/** 监听deptName */
watch(deptName, (val) => {
  treeRef.value!.filter(val)
})

/** 初始化 */
onMounted(async () => {
  await getLabelTree(listBiaoqianApiParams)
})

const renderContent = (
  h,
  {
    node,
    data,
    store
  }: {
    node: Node
    data: any
    store: Node['store']
  }
) => {
  return h(
    'span',
    {
      class: 'tree-node w-100% flex  justify-between'
    },
    h('span', null, node.label),
    h(
      'span',
      { style: { fontSize: '15px' } },
      null,
      h(
        'svg',
        {
          viewBox: '0 0 1024 1024',
          style: {
            width: '1em',
            height: '1em',
            verticalAlign: 'middle',
            margin: '3px'
          },
          onClick: () => append(data)
        },
        h('path', {
          fill: 'currentColor',
          d: 'M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z'
        })
      ),
      h(
        'svg',
        {
          viewBox: '0 0 1024 1024',
          style: {
            width: data.parentId == -1 ? '0' : '1em',
            height: '1em',
            verticalAlign: 'middle',
            margin: '3px'
          },
          onClick: () => editTree(data)
        },
        h('path', {
          fill: 'currentColor',
          d: 'm199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336zm384 254.272v-64h448v64h-448z'
        })
      ),
      h(
        'svg',
        {
          viewBox: '0 0 1024 1024',
          style: {
            width: data.parentId == -1 ? '0' : '1em',
            height: '1em',
            verticalAlign: 'middle',
            margin: '3px'
          },
          onClick: () => remove(data)
        },
        h('path', {
          fill: 'currentColor',
          d: 'M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32zm448-64v-64H416v64zM224 896h576V256H224zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32m192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32'
        })
      )
    )
  )
}

const append = (data: Tree) => {
  formRef.value.open('create', listBiaoqianApiParams, data['id'])
}

const editTree = (data: Tree) => {
  console.log(data.parentId)
  formRef.value.open('update', listBiaoqianApiParams, data['id'])
}
// const remove = (node: Node, data: Tree) => {
const remove = async (data: Tree) => {
  // 通过id查看是否有子节点
  const res = await BiaoqianApi.labelIsExists(data.id)
  console.log(res)
  if (res > 0) {
    message.warning('当前标签不能删除')
  } else {
    await message.delConfirm()
    await BiaoqianApi.delLabel(data['id'])
    getLabelTree(listBiaoqianApiParams)
  }
}
// 把标签   树形结构方法      当前节点 暴露出去
defineExpose({ getLabelTree, handleNodeClickData })
</script>
<style>
a {
  justify-content: space-between;
}
</style>
